<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Slides - Pagination</title>

    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-content id="content">
        <ion-slides>
          <ion-slide>
            <h1>Default Slides</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
        </ion-slides>

        <ion-slides pager>
          <ion-slide>
            <h1>Bullet Pagination</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
        </ion-slides>

        <ion-slides pager class="custom-bullets">
          <ion-slide>
            <h1>Custom Bullet Pagination</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
        </ion-slides>

        <ion-slides pager class="progressbar-pagination">
          <ion-slide>
            <h1>Progress Pagination</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
        </ion-slides>

        <ion-slides pager class="progressbar-pagination custom-progressbar">
          <ion-slide>
            <h1>Custom Progress Pagination</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
        </ion-slides>

        <ion-slides pager class="fraction-pagination">
          <ion-slide>
            <h1>Fraction Pagination</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
        </ion-slides>
      </ion-content>
    </ion-app>

    <script>
      var progressSlides = document.getElementsByClassName('progressbar-pagination');

      for (var i = 0; i < progressSlides.length; i++) {
        progressSlides[i].options = {
          pagination: {
            el: '.swiper-pagination',
            type: 'progressbar',
          },
        };
      }

      var fractionSlides = document.getElementsByClassName('fraction-pagination');

      for (var i = 0; i < fractionSlides.length; i++) {
        fractionSlides[i].options = {
          pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
          },
        };
      }
    </script>

    <style>
      ion-slides {
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 20px;
      }

      ion-slide {
        height: 100px !important;
      }

      .custom-bullets {
        --bullet-background: #ffb6c1;
        --bullet-background-active: #ff6a80;
      }

      .custom-progressbar {
        --progress-bar-background: #add8e6;
        --progress-bar-background-active: #72bcd4;
      }
    </style>
  </body>
</html>
